<template>
  <div>
     <!-- 顶部导航栏 -->
    <van-nav-bar
      title="商品"
      style="background:pink"
      @click-left="onClickLeft"
    />

    <van-tree-select
      height="100vh"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-image v-if="active === 0">
          <van-swipe-cell>
             <van-card
            
              price="2.00"
              desc="可做热饮"
              class="goods-card"
              title="轻松金牡丹"
              thumb="https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg"
            >
              <template #num>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-swipe-cell>
        </van-image>





 <van-image v-if="active === 1">
     <!-- 1 -->
          <van-swipe-cell>
            <van-card
              price="2.00"
              desc="描述信息"
              class="goods-card"
              title="商品标题"
              thumb="https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg"
            >
              <template #num>
                <van-button size="mini" to="/xiangqing">购买商品</van-button>
              </template>
            </van-card>
          </van-swipe-cell>
         <!-- 2 -->
           <van-swipe-cell>
            <van-card
            
              price="2.00"
              desc="可做热饮"
              class="goods-card"
              title="轻松金牡丹"
              thumb="https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg"
            >
              <template #num>
                <van-button size="mini">购买商品</van-button>
              </template>
            </van-card>
          </van-swipe-cell>
           <!-- 3 -->
           <van-swipe-cell>
            <van-card
            
              price="2.00"
              desc="可做热饮"
              class="goods-card"
              title="轻松金牡丹"
              thumb="https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg"
            >
              <template #num>
                <van-button size="mini" >购买商品</van-button>
              </template>
            </van-card>
          </van-swipe-cell>
        </van-image>



<van-image v-if="active === 2">
          <van-swipe-cell>
            <van-card
            
              price="2.00"
              desc="描述信息"
              class="goods-card"
              title="商品标题"
              thumb="https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg"
            >
              <template #num>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-swipe-cell>
        </van-image>





      </template>
    </van-tree-select>
  </div>
</template>                                                                                                                                                     
<script>
export default {
  data() {
    return {
      active: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }, { text: "分组 3" }],
    };
  },
};
</script>
<style scoped>
.goods-card {
  width: 290px;
}
</style>